<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>HTML+CSS面试题2019.04.24</title>
    <style>
        h3 {
            cursor: pointer;
            user-select: none;
        }

        h3, div {
            margin-left: 2em
        }

        h3 + div {
            display: none;
        }
        span{
            color: rgba(220,20,60,0.7);
        }
        pre{
            margin: 0;padding: 0;
        }
    </style>
    <script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.js"></script>
</head>
<body>
<h1>HTML+CSS面试题2019.04.24</h1>
<h3>介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？</h3>
<div>
    <pre>
    标准盒子模型：宽度=内容的宽度（content）+ border + padding + margin [如果IE678未添加doctype，即怪异模式，那么也是用IE模型]
    低版本IE盒子模型：宽度=内容宽度（content+border+padding）+ margin [从IE9以后，则不用填写声名也用的是W3C模型]
    </pre>
</div>
<h3>Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?</h3>
<div>
    <pre>
    web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
    在 HTML 4.01 中 基于 SGML,HTML5 不基于 SGML，所以不需要引用 DTD。
    在 HTML 4.01 中有三种 <!DOCTYPE> 声明。在 HTML5 中只有一种：默认标准盒模型
    DOCTYPE 影响盒子模型
    </pre>
</div>
<h3>box-sizing属性？</h3>
<div>
    <pre>
    用来控制元素的盒子模型的解析模式，默认为content-box / 标准模型 /
    context-box：W3C的标准盒子模型，设置元素的 height/width 属性指的是content部分的高/宽
    border-box：IE传统盒子模型。设置元素的height/width属性指的是border + padding + content部分的高/宽
    </pre>
</div>

<h3>CSS选择器有哪些？哪些属性可以继承</h3>
<div>
    <pre>
    CSS选择符：id选择器(#myid)、类选择器(.myclassname)、标签选择器(div, h1, p)、相邻选择器(h1 + p)、子选择器（ul > li）、后代选择器（li a）、通配符选择器（*）、属性选择器（a[rel=”external”]）、伪类选择器（a:hover, li:nth-child）
    可继承的属性：font-size, font-family, color
    不可继承的样式：border, padding, margin, width, height
    优先级（就近原则）：!important > [ id > class > tag ]
        <span>!important 比内联优先级高</span>
    </pre>
</div>

<h3> 	&lt;image&gt; 标签上title属性与alt属性的区别是什么？</h3>
<div>
    <pre>
    alt 一个必需的属性，它规定在图像无法显示时的替代文本。
    title 规定关于元素的额外信息, tooltip text tip:提示 tool:工具
    </pre>
</div>

<h3>请写出至少5个html5新增的标签，并说明其语义和应用场景</h3>
<div>
    <pre>
        nav定义导航链接的	section定义文档中的节	article定义独立的内容
        header文档的头部	footer文档的尾部区域	  datalist--input 历史联想值
        time定义日期或时 	aside比如侧边栏       address联系方式地址
    </pre>
</div>

<h3>请说说你对标签语义化的理解？</h3>
<div>
    <pre>
        a. 去掉或者丢失样式的时候能够让页面呈现出清晰的结构
        b. 有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
        c. 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
        d. 便于团队开发和维护，语义化更具可读性，遵循W3C标准的团队都遵循这个标准，可以减少差异化。
    </pre>
</div>


<h3>HTML与XHTML——二者有什么区别</h3>
<div>
    <pre>
    d. XHTML 文档必须拥有根元素。a. XHTML 元素必须被正确地嵌套。b. XHTML 元素必须被关闭。c. 标签名必须用小写字母。
    </pre>
</div>

<h3>html5有哪些新特性、移除了那些元素？</h3>
<div>
    <pre>
    a. HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。
    b. 拖拽释放(Drag and drop) API
    c. 语义化更好的内容标签（header,nav,footer,aside,article,section）
    d. 音频、视频API(audio,video)
    e. 画布(Canvas) API   f. 地理(Geolocation) API
    g. 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失  h. sessionStorage 的数据在页面会话结束时会被清除
    i. 表单控件，calendar、date、time、email、url、search
    j. 新的技术webworker, websocket等

    移除的元素：
    a. 纯表现的元素：basefont，big，center, s，strike，tt，u；
    b. 对可用性产生负面影响的元素：frame，frameset，noframes；
    </pre>
</div>

<h3>请列举几种可以清除浮动的方法（至少两种）</h3>
<div>
    <pre>
    1, 父级div定义 height  2, 结尾处加空div标签 clear:both
    3, 父级div定义 overflow:hidden
    4, :after{clear:both;}IE8以上和非IE浏览器才支持:after//zoom(IE转有属性)可解决ie6,ie7浮动问题
    </pre>
</div>

<h3>请列举几种隐藏元素的方法</h3>
<div>
    <pre>
    d. display: none；  a. visibility: hidden;  b. opacity: 0；(完全透明) c. position: absolute；
    e. transform: scale(0)；将一个元素设置为无限小，位置将被保留。
    f. HTML5 hidden attribute；hidden属性的效果和display:none;相同，
    g. height: 0; overflow: hidden；
    h. filter: blur(0)；将一个元素的模糊度设置为0，从而使这个元素“消失”在页面中。
    </pre>
</div>

<h3>请简述CSS样式表继承</h3>
<div>
    <pre>
     继承:color, font, letter-spacing,line-height, text-align, text-indent
     不继承:width、height、margin padding border
    </pre>
</div>

<h3>请简述CSS的选择器</h3>
<div>
    <pre>
    元素选择器：* 、a、 div、 E.class
    关系选择器：E、F、E>F、E+F、E~F
    属性选择器：E[att]、E[att="val"]、E[att~="val"]、E[att^="val"]、E[att$="val"]、E[att*="val"]、E[att|="val"]
    伪类选择器：E:link、E:visited、E:hover、E:active、E:focus、E:lang(fr)、E:not(s)、E:root、E:first-child、E:last-chil等
    伪对象选择器：E:first-letter/E::first-letter、E:first-line/E::first-line、E:before/E::before、E:after/E::after、E::selection
    </pre>
</div>

<h3>CSS伪类与CSS伪对象的区别</h3>
<div>
    <pre>
    伪类：一开始用来表示一些元素的动态状态，随后CSS2标准扩展了其概念范围，使其成为了所有逻辑上存在但在文档树中却无须标识的“幽灵”分类
    伪对象：代表了某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中
    </pre>
</div>

<h3>在CSS样式中常使用px、em，rem各有什么优劣，在表现上有什么区别？</h3>
<div>
    <pre>
        任意浏览器的默认字体高都是16px
    px。像素px是相对于显示器屏幕分辨率而言的。如果改变了浏览器的缩放，这时会使用我们的Web页面布局被打破
    em。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。(引自CSS2.0手册)
    rem。（root em，根em）除了IE8及更早版本外，所有浏览器均已支持rem
    </pre>
</div>

<h3> CSS中 link 和@import 的区别是什么？</h3>
<div>
    <pre>
    a. link属于HTML标签，而@import是CSS提供的，且只能加载 CSS
    b. 页面被加载时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载
    c. import只在IE5以上才能识别，而link是HTML标签，无兼容问题
    d. link方式的样式的权重 高于@import的权重
    e. 当使用 Javascript 控制 DOM 去改变样式的时候，只能使用 link 方式，因为 @import 眼里只有 CSS ，不是 DOM 可以控制
    </pre>
</div>

<h3> position的absolute与fixed共同点与不同点</h3>
<div>
    <pre>
    相同：a. 改变行内元素的呈现方式，display被置为block
    相同：b. 让元素脱离普通流，不占据空间
    相同：c. 默认会覆盖到非定位元素上
    区别： absolute的”根元素“是可以设置的，而fixed的”根元素“固定为浏览器窗口。
    区别： 当你滚动网页，fixed元素与浏览器窗口之间的距离是不变的。
    </pre>
</div>

<h3>position的值， relative和absolute分别是相对于谁进行定位的？</h3>
<div>
    <pre>
    absolute：生成绝对定位的元素，相对于 static 定位以外的第一个祖先元素进行定位
    fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。 （IE6不支持）
    relative：生成相对定位的元素，相对于其在普通流中的位置进行定位
    static：默认值。没有定位，元素出现在正常的流中
    </pre>
</div>

<h3> CSS3有哪些新特性？</h3>
<div>
    <pre>
    CSS3实现圆角（border-radius），阴影（box-shadow），对文字加特效（text-shadow），线性渐变（gradient），变形（transform）
    增加了更多的CSS选择器 多背景 rgba，在CSS3中唯一引入的伪元素是::selection，媒体查询，多栏布局
    </pre>
</div>

<h3>rgba()和opacity的透明效果有什么不同？</h3>
<div>
    <pre>
    a. opacity作用于元素，以及元素内的所有内容的透明度，rgba()只作用于元素的颜色或其背景色。
    b. 设置rgba透明的元素的子元素不会继承透明效果！
    </pre>
</div>

<h3>https://segmentfault.com/a/1190000017762548</h3>
<div>
    <pre>
    https://segmentfault.com/a/1190000017762548
    </pre>
</div>

<h3>122222222</h3>
<div>
    <pre>
    1222222222222222222
    </pre>
</div>

<h3>122222222</h3>
<div>
    <pre>
    1222222222222222222
    </pre>
</div>

<h3>122222222</h3>
<div>
    <pre>
    1222222222222222222
    </pre>
</div>

<h3>122222222</h3>
<div>
    <pre>
    1222222222222222222
    </pre>
</div>

<h3>122222222</h3>
<div>
    <pre>
    1222222222222222222
    </pre>
</div>

<h3>122222222</h3>
<div>
    <pre>
    1222222222222222222
    </pre>
</div>

<h3>122222222</h3>
<div>
    <pre>
    1222222222222222222
    </pre>
</div>

<h3>122222222</h3>
<div>
    <pre>
    1222222222222222222
    </pre>
</div>

<h3>122222222</h3>
<div>
    <pre>
    1222222222222222222
    </pre>
</div>

<h3>122222222</h3>
<div>
    <pre>
    1222222222222222222
    </pre>
</div>

<h3>122222222</h3>
<div>
    <pre>
    1222222222222222222
    </pre>
</div>

<h3>122222222</h3>
<div>
    <pre>
    1222222222222222222
    </pre>
</div>

<h3>122222222</h3>
<div>
    <pre>
    1222222222222222222
    </pre>
</div>


</body>
</html>

<script>
  $(function () {
    $("h3").click(function () {
      $(this).next().toggle();
    });
  })
</script>

